<template>
  <div class="header">
    <i-menu mode="horizontal" theme="dark" :active-name="activeName">
      <Row>
        <i-col span="16">
          <menu-item name="1" :to="isLoginPath">
            <Icon type="ios-desktop-outline" />
            主页
          </menu-item>
          <menu-item name="2" to="/movieList">
            <Icon type="ios-film-outline" />
            电影
          </menu-item>
          <div v-if="isUserAdmin">
            <menu-item name="3" to="/movieAdd">
              <Icon type="ios-play-outline" />
              添加电影
            </menu-item>
            <menu-item name="4" to="/articleAdd">
              <Icon type="ios-create-outline" />
              添加文章
            </menu-item>
          </div>
        </i-col>
        <i-col span="8">
          <user-message></user-message>
        </i-col>
      </Row>
    </i-menu>
  </div>
</template>

<script>
import UserMessage from './UserMessage'
export default {
  components: {
    UserMessage
  },
  data() {
    return {
      activeName: '1'
    }
  },
  computed: {
    isUserAdmin() {
      return localStorage.getItem('userAdmin') === 'true' ? true : false
    },
    isLoginPath() {
      return localStorage.getItem('token') ? '/home' : '/'
    }
  },
  mounted() {
    this.menuLight()
  },
  methods: {
    // menu高亮问题修正
    menuLight() {
      let path = this.$route.path // 获取到地址拦上#号后面的url地址
      console.log('path: ', path)

      if (path === '/' || path === '/home') {
        this.activeName = '1'
      } else if (path === '/movieList') {
        this.activeName = '2'
      } else if (path === '/movieAdd') {
        this.activeName = '3'
      } else if (path === '/articleAdd') {
        this.activeName = '4'
      } else {
        this.activeName = ''
      }
    }
  }
}
</script>

<style lang="css" scoped>
.header {
  /* z-index: 10; */
  height: 60px;
  width: 100%;
  margin-bottom: 8px;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
}
</style>
